<!--
 * @Description: 
 * @Author: xuzp4
-->
<template>
  <el-dialog
    class="dialog"
    :visible="_visible"
    :title="$t('yonghuguanli.roleDetail')"
    :append-to-body="true"
    width="520px"
    :before-close="handleClose"
  >
    <div class="content d-flex jc-center ai-center">
      <el-form label-width="100px">
        <el-form-item :label="$t('yonghuguanli.role_simple_name')+':'">
          <span>{{formData.group_name}}</span>
        </el-form-item>
        <el-form-item :label="$t('yonghuguanli.create_time')+':'">
          <span>{{formData.create_time}}</span>
        </el-form-item>
        <el-form-item :label="$t('yonghuguanli.update_time')+':'">
          <span>{{formData.update_time}}</span>
        </el-form-item>
        <el-form-item :label="$t('yonghuguanli.permission')+':'">
          <ResourceTree :visible="_visible" :disabled="true" :permission="formData.permission" />
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import ResourceTree from "./Resource.vue";
export default {
  components: {
    ResourceTree
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    row: {
      handler(val) {
        if (val) {
          this.$set(this, "formData", JSON.parse(JSON.stringify(val)));
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  data() {
    return { formData: {} };
  },
  methods: {
    handleClose(done) {
      this._visible = false;
      done();
    },
    formatRole(group_id) {
      const roleInfo = this.roleList.find(item => item.group_id == group_id);
      return (roleInfo && roleInfo.group_name) || "";
    }
  }
};
</script>
<style lang="less" scoped>
.dialog {
  z-index: 9999;
  .content {
    width: 100%;
    /deep/ .el-form {
      width: 100%;
    }
  }
}
</style>
